<template>
    <div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import * as Cesium from 'cesium';
const czml = [
    {
        id: 'document',
        name: 'box',
        version: '1.0'
    },
    {
        id: 'shape2',
        name: 'Red box with black outline',
        position: {
            cartographicDegrees: [-107.0, 40.0, 300000.0]
        },
        box: {
            dimensions: {
                cartesian: [400000.0, 300000.0, 500000.0]
            },
            material: {
                solidColor: {
                    color: {
                        rgba: [255, 0, 0, 128]
                    }
                }
            },
            outline: true,
            outlineColor: {
                rgba: [0, 0, 0, 255]
            }
        }
    }
];

const init = () => {
    const viewer = new Cesium.Viewer('cesiumContainer');
    const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
    viewer.dataSources.add(dataSourcePromise);
    viewer.zoomTo(dataSourcePromise);
};
onMounted(() => {
    init();
});
</script>
<style lang="scss" scoped></style>
